function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

var lyricText = lyText;
var currentIndex = 0;

function loadLyrics() {
  var lyricMain = document.getElementById("lyMain");
  lyricText.forEach(paragraphText => {
    var text = paragraphText.reduce((acc, curr) => acc + curr.text, "");
    var pElem = document.createElement("p");
    pElem.innerText = text;
    lyricMain.appendChild(pElem);
  });
  setLyricTop();
  playLyrics();
}

async function animateLyrics(lyricParagraph, paragraphElement) {
  let spanArray = [];
  for (let i = 0; i < lyricParagraph.length; i++) {
    let span = document.createElement("span");
    span.textContent = lyricParagraph[i].text;
    paragraphElement.appendChild(span);
    spanArray[i] = span;
  }
  for (let i = 0; i < lyricParagraph.length; i++) {
    let progress = 0;
    while (progress < 101) {
      spanArray[i].style.backgroundImage = `linear-gradient(to right, lightgreen ${progress}%, #efedef 0%)`;
      progress++;
      await sleep(lyricParagraph[i].time / 100);
    }
    await sleep(lyricParagraph[i].wait);
  }
}

async function playLyrics() {
  var lyricMainDiv = document.getElementById("lyMain");
  var paragraphs = lyricMainDiv.getElementsByTagName("p");
  while (currentIndex < paragraphs.length) {
    let paragraphText = lyricText[currentIndex];
    let lyricParagraph = paragraphText.map(item => ({ ...item }));
    let paragraphElement = paragraphs[currentIndex];
    paragraphs[currentIndex].innerHTML = "";
    paragraphs[currentIndex].classList.add("highlight");
    await animateLyrics(lyricParagraph, paragraphElement);
    paragraphs[currentIndex].innerText = paragraphElement.textContent;
    paragraphs[currentIndex].classList.remove("highlight");
    currentIndex++;
    lyricMainDiv.style.top = `${parseInt(window.getComputedStyle(lyricMainDiv).top) - parseInt(window.getComputedStyle(paragraphElement).height)}px`;
  }
}

var mainDiv = document.getElementById("Main");
var lyricMainHeight = parseInt(window.getComputedStyle(mainDiv).height);

function setLyricTop() {
  var lyricMainDiv = document.getElementById("lyMain");
  var paragraphs = lyricMainDiv.getElementsByTagName("p");
  var paragraphHeight = parseInt(window.getComputedStyle(paragraphs[currentIndex]).height);
  var lyricTop = parseInt(lyricMainHeight / paragraphHeight) / 2;
  lyricMainDiv.style.top = `${paragraphHeight * lyricTop}px`;
}

var resizeTimer;

function resetLyricTop() {
  var lyricMainDiv = document.getElementById("lyMain");
  let newHeight = parseInt(window.getComputedStyle(mainDiv).height);
  let heightDiff = lyricMainHeight - newHeight;
  let paragraphs = lyricMainDiv.getElementsByTagName("p");
  let paragraphHeight = parseInt(window.getComputedStyle(paragraphs[currentIndex]).height);
  var lyricTop = parseInt(heightDiff / paragraphHeight) / 2;
  lyricMainDiv.style.top = `${parseInt(window.getComputedStyle(lyricMainDiv).top) - lyricTop * paragraphHeight}px`;
  lyricMainHeight = newHeight;
}

window.addEventListener('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(resetLyricTop, 500);
});

loadLyrics();
